<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件修改父组件的值</title>
</head>
<body>
   
    <div id="app">
        <html-a :count="count"></html-a>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //去除警告
        Vue.config.productionTip = false; 
        
        //  全局组件  全局组件也可以获取根组件 传过来的值  因为全局组件也是根组件的子组件
        Vue.component('html-a',{
            data(){
                return {
                    message:"子组件",
                    childCount:this.count
                }
            },
            //   <div>{{text}}{{message}}</div>  {{text}}是父组件传过来的值  {{message}}是子组件本身的值
            template:`
                <div>
                    <button @click="childCount++">{{childCount}}</button>
                </div>   
            `,
            //如果要布局  从props下手   我们传一些其他类型的参数
            props:['count']
        });
        //new vue对象本身就是一个组件  即是根组件 也是父组件
        let vue = new Vue({
            el:"#app",
            data:{
                count:5

            },
            methods: {
                
            },
            
        })
    </script>
</body>
</html>